【VUE入门】父组件给子组件传值

父组件传值给子组件

【 各位看的时候记得要看代码中的注释！！记得！！】

父组件给子组件传值，最最要记得【 props】,在子组件中用 props 来接收父组件传来的数据，之后展示在子组件中。

例如：

子组件 child.vue

<template>
   <div>
       <h5>我是子组件</h5>
       <p>我从父组件获取到的信息是： {{message}}</p>
       <!----在html中调用这个  message 属性，显示数据--->
   </div>
</template>

<script>
   export default{
       props:['message']  //创建 props,为它创建 message 这个属性
   }

</script>

<style>

</style>

创建了子组件之后，就需要在父组件中 注册一下 子组件,然后给子组件传值。

父组件 father.vue

<template>
    <div id="app">
        <h5>我是父组件</h5>
        
        <!---- ② 引入子组件标签  -->
        
        <child  message="hello"></child>  
        <!---  创建child标签，在该标签中把我们在 子组件中创建的 message 赋值为 “hello” --->
        
    </div>
</template>

<script>

    import child from './components/child';
    
    export default{
        name:'app',
    
        // ①  注册子组件
        components:{
            child
        }
    }

</script>

<style>

</style>

接下来子组件就会收到 “hello” 这个信息。

子组件 child.vue

<template>
   <div>
       <h5>我是子组件</h5>
       
       <!----  子组件收到信息  --->
       
       <p>我从父组件获取到的信息是： {{message}}</p>  <!-- 我从父组件获取到的信息是： hello  -->
       <!----在html中调用这个  message 属性，显示数据--->
       
   </div>
</template>

<script>
   export default{
       props:['message']  //创建 props,为它创建 message 这个属性
   }

</script>

<style>

</style>

另外，我们也可以在父组件对 message 的值进行 v-bind 动态绑定

例如：

父组件 father.vue

<template>
    <div id="app">
        <h5>我是父组件</h5>
        
        <!---- ② 引入子组件标签  -->
        
        <child  v-bind:message="theword"></child>  
        <!---  创建child标签，用 v-bind对 message 的值进行动态绑定，theword用于父组件，父组件对它赋值 --->
        
    </div>
</template>

<script>

    import child from './components/child';
    
    export default{
        name:'app',
        
        data(){
            return{
                theword:"come on baby"   //对  theword 进行赋值。
            }
        }
    
        // ①  注册子组件
        components:{
            child
        }
    }

</script>

<style>

</style>

总结

• 子组件中要使用props设置一个属性 message 来接收父组件传过来的值。
• 父组件中： 1. 先注册子组件 2. 引入子组件标签，在标签中给message赋值

或者

• 父组件中：用v-bind对 message 进行动态绑定，给message 设置一个参数 theword ，父组件中在 data()中设置 theword 的值。